<!DOCblog html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>博客管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
  <script src="../../static/js/moment.min.js" th:src="@{/js/moment.min.js}"></script>

</head>
<body>
  <div id="blogs">
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
      <div class="ui container">
        <div class="ui inverted secondary stackable menu">
          <h2 class="ui olive header item" style="font-family: STSong; font-weight: 900" >管理后台</h2>
          <a href="/admin/blogs/index" class="active m-item item m-mobile-hide"><i class="mini el-icon-tickets"></i>&nbsp博客管理</a>
          <a href="/admin/types/index" class="m-item item m-mobile-hide"><i class="mini el-icon-s-opportunity"></i>&nbsp分类管理</a>
          <a href="/admin/tags/index" class="m-item item m-mobile-hide"><i class="mini el-icon-s-flag"></i>&nbsp标签管理</a>
          <div class="right m-item m-mobile-hide menu">
            <div class="ui dropdown  item">
              <div class="text">
                <img class="ui avatar image" src="https://unsplash.it/1000/400?image=1015">
                <p align="center" th:text="${session.user.username}">风中的人儿啊~</p>
              </div>
              <i class="dropdown icon"></i>
              <div class="menu">
                <a href="/admin/logout" th:href="@{/admin/logout}" class="item">注销</a>
              </div>
            </div>
            <div class="item">
              <el-button size="small" type="info" round @click="resetUserInfo()">修改个人信息</el-button>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!--发布、列表二级导航-->
    <div class="ui attached pointing menu">
      <div class="ui container">
        <div class="right menu">
          <div style="border-right:1px; border-left: 1px solid rgb(232, 233, 233);">
            <a href="#/blog_input" @click="touchClassA" class="item" :class="isClassA ? ['active','teal'] : ''">发布</a>
          </div>
          <div style="border-right:1px">
            <a href="#/blog_list" @click="touchClassB" class="item" :class="isClassB ? ['active','teal'] : ''" >列表</a>
          </div >
        </div>
      </div>
    </div>

    <!--中间内容-->
    <router-view></router-view>

    <!--用户信息编辑表单-->
    <div v-show="show" class=" m-border" style="float: right;margin-top: -350px; margin-right: 130px; width: 15%; padding-top: 20px; border: 2px solid #f2f2f2; border-radius: 5px" align="center">
      <el-form style="width: 90%" :model="userForm" :rules="rules" ref="userForm">
        <el-form-item label="" prop="newUserName">
          <el-input v-model="userForm.newUserName"
                    type="text" prefix-icon="el-icon-user"
                    clearable placeholder="新用户名" style=""></el-input>
        </el-form-item>
        <el-form-item label="" prop="newPassword">
          <el-input v-model="userForm.newPassword"
                    type="password"
                    prefix-icon="el-icon-lock" clearable
                    placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="oldPassword">
          <el-input v-model="userForm.oldPassword"
                    type="password"
                    prefix-icon="el-icon-lock" clearable
                    placeholder="原密码"
                    @keyup.enter.native="submitUserForm('userForm')"></el-input>
        </el-form-item>
        <el-form-item style="width: 70%">
          <el-button class="m-border" type="primary" @click="submitUserForm('userForm')" style="background-color: #00aaaa">提交</el-button>
          <el-button class="m-border" @click="getBack('userForm')" style="">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!--底部footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
      <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
          <div class="three wide column">
            <div class="ui inverted link list">
              <div class="item">
<!--                <img th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">-->
              </div>
            </div>
          </div>
          <div class="three wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
            <div class="ui inverted link list">
              <a href="#" class="item m-text-thin">Email：luosj@bff.com</a>
              <a href="#" class="item m-text-thin">QQ：2542331408</a>
            </div>
          </div>
          <div class="seven wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
            <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
          </div>
        </div>
        <div class="ui inverted section divider"></div>
        <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2020 - 2021 Luosj Designed by Luosj</p>
      </div>
    </footer>
  </div>
</body>
</html>

<!-- 组建1: 添加视图 -->
<template id="blogInputTemplate" align="center">
  <div id="blog_input" align="center">
    <div id="blog_input_index" class="blog_index">
      <!-- 博客表单-->
      <el-form :model="blogForm" :rules="rules" ref="blogForm">
        <!-- 博客标题 -->
        <el-form-item prop="title">
          <el-input placeholder="博客标题" clearable v-model="blogForm.title">
            <template slot="prepend">
              <!-- 博客标签 -->
              <el-select
                      style="width: 80px"
                      v-model="blogForm.flag"
                      default-first-option
                      placeholder="博客标签">
                <el-option
                        v-for="item in flagOptions"
                        :key="item.flag"
                        :label="item.label"
                        :value="item.flag">
                </el-option>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <!-- 博客内容 -->
        <div id="md-content" style="z-index: 2 !important; width: 54%;" @change="bindContentOnVue()">
          <textarea placeholder="博客内容" v-model="blogForm.content" ref="content"  style="display: none"></textarea>
        </div>
        <!-- 分类和标签 -->
        <div id="typeAndTag" >
          <el-row>
            <!-- 分类 -->
            <el-col :span="12">
              <el-form-item prop="typeId" align="left">
                <el-input type="hidden" style="width: 10px; height: 40px">
                  <template slot="prepend">分类</template>
                </el-input>
                <el-select
                           style="margin-left: -3px;"
                           v-model="blogForm.typeId"
                           filterable clearable
                           placeholder="分类">
                  <el-option
                             v-for="item in typeOptions"
                             :key="item.typeId"
                             :label="item.typeName"
                             :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="12">
              <el-form-item prop="tagId" align="right">
                <el-input type="hidden" style="width: 30px; height: 40px">
                  <template slot="prepend">标签</template>
                </el-input>
                <el-select multiple
                           style="margin-left: -3px;"
                           v-model="blogForm.tagId"
                           filterable clearable
                           placeholder="标签">
                  <el-option
                          v-for="item in tagOptions"
                          :key="item.tagId"
                          :label="item.tagName"
                          :value="item.tagId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 首图 -->
        <el-form-item prop="firstPicture">
          <el-input placeholder="首图引用地址" clearable v-model="blogForm.firstPicture">
            <template slot="prepend">首图</template>
          </el-input>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item prop="description">
          <el-input
                  :rows="6"
                  type="textarea"
                  placeholder="博客描述..."
                  v-model="blogForm.description"
          >
          </el-input>
        </el-form-item>
        <!-- 四个开启框 -->
        <el-form-item class="openBox" align="left" style="margin-top: -14px">
          <el-checkbox v-model="blogForm.recommend">
            <p style="font-size: 14px; font-weight: 600; margin-top: 10px">推荐</p>
          </el-checkbox>
          <el-checkbox v-model="blogForm.shareStatement">
            <p style="font-size: 14px!important; font-weight: 600; margin-top: 10px">转载声明</p>
          </el-checkbox>
          <el-checkbox v-model="blogForm.appreciation">
            <p style="font-size: 14px!important; font-weight: 600; margin-top: 10px">赞赏</p>
          </el-checkbox>
          <el-checkbox v-model="blogForm.commentabled">
            <p style="font-size: 14px!important; font-weight: 600; margin-top: 10px">评论</p>
          </el-checkbox>
        </el-form-item>
        <!-- 返回、保存、提交 -->
        <el-form-item style="margin-top: 8px;" align="right">
          <el-button class="m-border"
                     @click="toBackList()"
                     style="background-color: rgb(224, 225, 226);
                     font-weight: 700;">返回</el-button>
          <el-button class="m-border"
                     @click="saveButton('blogForm')"
                     style="background-color: #0f043d; border-color: #0f043d; font-weight: 700; color: #d1f1f3">保存</el-button>
          <el-button class="m-border"
                     type="primary"
                     @click="submitButton('blogForm')"
                     style="background-color: #00aaaa;
                     font-weight: 700;">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- 组件2: 列表视图 -->
<template id="blogListTemplate">
  <div id="blog_list" align="center">
    <div id="blog_list_index" class="blog_index">
      <div class="m-border" style="background-color: #f2f2f2; height: 75px; padding-top: 15px; border-color: #00aaaa">
        <el-form :inline="true" :model="blogQueryForm" class="demo-form-inline" style="margin-left: -300px">
          <el-form-item>
            <el-input v-model="blogQueryForm.title" clearable placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="blogQueryForm.typeId"
                       filterable clearable
                       placeholder="分类">
              <el-option
                      v-for="item in options"
                      :key="item.typeId"
                      :label="item.typeName"
                      :value="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="blogQueryForm.recommend">
              <p style="font-size: 14px!important; font-weight: 600; margin-top: 10px">推荐</p>
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
                    style="margin-top: 5px; background-color: #6bddfa; border-color: #6bddfa"
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="queryBlog">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table
              :data="tableData"
              style="width: 100%; margin-top: 15px"
              :header-cell-style="tableHeaderColor">
        <el-table-column
                label=""
                type="index"
                width="30">
        </el-table-column>
        <el-table-column
                label="标题"
                width="145">
          <template slot-scope="scope">
            <div slot="reference">
              <span>{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="类型"
                width="130">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.typeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="推荐"
                width="85">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.recommend?'是':'否' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="85">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.published?'已发布':'草稿' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="更新时间"
                width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.updateTime | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    style="background-color: #67c23a; border-color: #67c23a; color: rgb(255,255,255)"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
                    confirm-button-text='是的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定要删除当前分类吗？"
                    @confirm="handleDelete(scope.$index, scope.row)">
              <el-button size="mini"
                         type="danger"
                         slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="page_index">
        <div>
          <div style="float: left">
            <el-pagination
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    layout="prev, pager, next,jumper,total,sizes"
                    :page-size="size"
                    :current-page="pageNow"
                    :page-sizes="[2,4,6,8,10]"
                    @current-change="findPage"
                    @size-change="findSize"
                    :total="total">
            </el-pagination>
          </div>
          <div style="float: right; margin-right: 7px">
            <el-button
                    size="mini"
                    style="background-color: #00aaaa; border-color: #00aaaa; color: rgb(255,255,255)"
                    @click="toCreateBlog()">新增</el-button>
          </div>
          <div style="clear: both"></div> <!--在 .head div 最后补一个空DIV 清除浮动-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  //组件1 blogInput
  const blogInput = {
    template:"#blogInputTemplate",
    data(){
      return {
        blogForm:{
          id:-1,
          flag:"",
          title:"",
          content:"",
          typeId:"",
          tagId:[],
          firstPicture:"",
          description:"",
          recommend:false,
          shareStatement:false,
          appreciation:false,
          commentabled:false,
          published:false,
        },
        rules: {
          title: [
            { required: true, message: '博客标题不能为空', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '博客内容不能为空', trigger: 'blur' }
          ],
          typeId: [
            { required: true, message: '分类不能为空', trigger: 'blur' }
          ],
          tagId: [
            { required: true, message: '标签不能为空', trigger: 'blur' }
          ],
          firstPicture: [
            { required: true, message: '首图地址不能为空', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '博客描述不能为空', trigger: 'blur' }
          ]
        },
        flagOptions: [{
          flag: '原创',
          label: '原创'
        }, {
          flag: '转载',
          label: '转载'
        }, {
          flag: '翻译',
          label: '翻译'
        }],
        typeOptions:[],
        tagOptions:[]
      };
    },
    methods:{
      // 返回按钮路由跳转
      toBackList(){
        this.$parent.touchClassB(); // 调用方法改变导航按钮样式
        this.$router.push({path:'/blog_list'}) // 跳转路由
      },
      // 下拉框获取所有分类信息
      getTypeOptions(){
        axios.get("http://localhost:8088/admin/types/list").then(res => {
          if (res.data.code == 0) { // 查询成功
            // console.log(res.data.data);
            this.typeOptions = res.data.data;
          }
        });
      },
      // 下拉框获取所有标签信息
      getTagOptions(){
        axios.get("http://localhost:8088/admin/tags/list").then(res => {
          if (res.data.code == 0) { // 查询成功
            // console.log(res.data.data);
            this.tagOptions = res.data.data;
          }
        });
      },
      // 标签赋值（点击编辑跳转blog——input组件后）
      getTagByBlog(){
        if (this.blogForm.id != -1){ // id 不为-1 即表示编辑更新
          axios.get("http://localhost:8088/admin/tags/byBlog/"+this.blogForm.id).then(res => {
            if (res.data.code == 0) { // 查询成功
              console.log(res.data.data);
              this.blogForm.tagId = res.data.data;
            }
          });
        }
      },
      // 绑定博客内容到vue中
      bindContentOnVue(){
        // console.log(this.$refs.content.value);
        this.blogForm.content = this.$refs.content.value;
      },
      // 保存按钮
      saveButton(blogForm){
        this.blogForm.published = false;// 保存时，设置published为false，保证编辑时可以改变状态
        let successMsg = "保存成功";
        this.submitForm(blogForm, successMsg);
      },
      // 提交按钮
      submitButton(blogForm){
        let successMsg = "发布成功";
        this.blogForm.published = true;// 提交时，设置published为true
        this.submitForm(blogForm, successMsg);
      },
      // 提交表单数据到后台
      submitForm(blogForm, successMsg) {
        const _this = this;
        this.$refs[blogForm].validate((valid) => {
          if (valid) {
            // console.log(_this.blogForm);
            // 当 id == -1 即表示新创建博客
            if (this.blogForm.id == -1){
              //发送一个ajax请求
              axios.post("http://localhost:8088/admin/blogs/create", this.blogForm).then(res => {
                // console.log(res.data);
                if (res.data.code == 0) { //添加成功
                  this.$message({
                    message: '博客' + successMsg,
                    type: 'success',
                    offset:120,
                    showClose:true
                  });
                  // 阻塞0.3秒
                  setTimeout(function() {
                    _this.toBackList(); // 返回至列表
                  }, 300);
                } else { // 添加失败
                  this.$message({
                    message:res.data.message,
                    type: 'error',
                    offset:120,
                    showClose:true
                  });
                }
              });
            } else {
              // 当 id ！= -1 即表示新更新博客
              // 发送一个ajax请求
              axios.put("http://localhost:8088/admin/blogs/update/"+this.blogForm.id, this.blogForm).then(res => {
                console.log(res.data);
                if (res.data.code == 0) { //修改成功
                  this.$message({
                    message: '博客修改' + successMsg,
                    type: 'success',
                    offset:120,
                    showClose:true
                  });
                  // 阻塞0.3秒
                  setTimeout(function() {
                    _this.toBackList(); // 返回至列表
                  }, 300);
                } else { // 修改失败
                  this.$message({
                    message:res.data.message,
                    type: 'error',
                    offset:120,
                    showClose:true
                  });
                }
              });
            }
          } else {
            this.$message({
              message:"请将信息填写完整!",
              type: 'error',
              offset:120,
              showClose:true
            });
            return false;
          }
        });
      },


      // 引入外部script，主要用于初始化Markdown
      initMarkdown() {
        var script = document.createElement('script')
        script.type = 'text/javascript';
        script.async = true;
        script.src = '/lib/editormd/markdown.js';
        document.head.appendChild(script);
      }
    },
    created() {
      this.initMarkdown();// 初始化Markdown
      this.blogForm.flag = this.flagOptions[0].flag; // 设置flag默认为原创
      this.getTypeOptions();// 如下表单赋值能展示分类的前提是得先有 typeOptions，所以要先获得 typeOptions
      this.getTagOptions();// 如下表单赋值能展示标签的前提是得先有 tagOptions，所以要先获得 tagOptions
      // console.log(this.$route.params.row);
      if (this.$route.params.row != null){ // 点击编辑按钮时，获取值
        this.blogForm = this.$route.params.row;
        this.getTagByBlog();
      }
    }
  };

  //组件2 blogList
  const blogList = {
    template:"#blogListTemplate",
    data(){
      return {
        // isRouterAlive:true,
        blogQueryForm:{
          title:"",
          typeId:"",
          recommend:null
        },
        options: [],
        tableData: [],
        total: 0,
        size: 4,
        pageNow: 1
      };
    },
    methods:{
      // 设置表头行的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:#0aa;color:#fff;font-wight:500;font-size:20px;'
      },
      // 设置索引,还未实现！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
      indexMethod(index){
        return (this.pageNow-1) * this.size + index + 1;
      },
      // 发布按钮路由跳转
      toInputIndex(){
        this.$router.push({path:'/blog_input'});
      },
      // 下拉框获取分类信息
      getOptions(){
        axios.get("http://localhost:8088/admin/types/list").then(res => {
          if (res.data.code == 0) { // 查询成功
            // console.log(res.data.data);
            this.options = res.data.data;
          }
        });
      },
      // 查询按钮
      queryBlog(){
        // console.log(this.blogQueryForm);
        this.findAllTableData();
      },
      // 新增按钮路由跳转
      toCreateBlog(){
        this.$parent.touchClassA(); // 调用方法改变导航按钮样式
        this.toInputIndex(); // 跳转路由
      },
      // 编辑按钮
      handleEdit(index, row) {
        // console.log(index, row);
        this.$parent.touchClassA(); // 调用方法改变导航按钮样式
        this.$router.push({ // 路由跳转并传参
          name:'blogInput',
          params:{
            row:row //博客信息
          }
        });
      },
      // 删除按钮
      handleDelete(index, row) {
        console.log(index, row);
        //发送axios请求处理删除
        axios.delete("http://localhost:8088/admin/blogs/delete/" + row.id).then(res => {
          if (res.data.code == 0) { // 删除成功
            this.$message({
              message: "删除成功",
              type: 'success',
              offset:120,
              showClose:true
            });
            this.findAllTableData(this.page,this.size);// 刷新数据
          } else {
            this.$message({
              message:res.data.message,
              type: 'error',
              offset:120,
              showClose:true
            });
          }
        });
      },
      findSize(size) {
        // console.log(size);
        this.size = size;
        this.findAllTableData(this.page,size);
      },
      // 用来处理分页相关方法
      findPage(page) {
        // console.log(page)
        this.page = page;
        this.findAllTableData(page, this.size);
      },
      // 查询博客列表
      findAllTableData(page, size) {
        page = page ? page : this.pageNow,
        size = size ? size : this.size;
        axios.post("http://localhost:8088/admin/blogs/list",{
          title:this.blogQueryForm.title,
          typeId:this.blogQueryForm.typeId,
          recommend:this.blogQueryForm.recommend,
          pageNum:page,
          pageSize:size
        }).then(res => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
      }
    },
    created() {
      this.findAllTableData();// 查询博客列表
      this.getOptions();// 获取分类下拉框列表数据
    },
    filters:{
      // 格式化时间
      dateFormat(el){
        return moment(el).format("YYYY-MM-DD HH:mm");
      }
    }
  };

  //创建路由对象
  const router = new VueRouter({
    routes:[
      { path:'/',redirect:'/blog_list'},  // redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示
      { path:'/blog_list', name:'blogList', component:blogList},
      { path:'/blog_input', name:'blogInput', component:blogInput},
    ]
  });

  // 创建vue对象
  const app = new Vue({
    el: '#blogs',
    data: {
      isClassA:false,
      isClassB:true,
      show: false,
      userForm:{
        id: -1,
        newUserName:"",
        newPassword:"",
        oldPassword:""
      },
      rules: {
        newUserName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ]
      }
    },
    methods:{
      // 点击改变
      touchClassA(){
        this.isClassA = true;
        this.isClassB = false;
      },
      touchClassB(){
        this.isClassA = false;
        this.isClassB = true;
      },
      // 获取当前用户信息
      getCurrentUser(){
        axios.get("http://localhost:8088/admin/user/info").then(res => {
          if (res.data.code == 0) { // 查询成功
            console.log(res.data.data);
            this.userForm.id = res.data.data.id;
            this.userForm.newUserName = res.data.data.username;
          }
        });
      },
      // 修改用户信息按钮，获取当前用户信息
      resetUserInfo(){
        this.show = !this.show;
        if(this.show == true){ // 显示修改表单时才赋值
          this.getCurrentUser();// 表单赋值
        } else {// 不显示修改表单时，重置表单信息
          this.$refs.userForm.resetFields(); // 表单重置
          this.getCurrentUser(); // 表单赋值
        }
      },
      // 提交表单
      submitUserForm(userForm){
        this.$refs[userForm].validate((valid) => {
          if (valid) {
            if (this.userForm.id != -1){ // id 不为-1 即系统有当前用户
              axios.put("http://localhost:8088/admin/user/update/" + this.userForm.id, this.userForm).then(res => {
                // console.log(res.data);
                if (res.data.code == 0) { //修改成功
                  this.$message({
                    message: '用户信息修改成功',
                    type: 'success',
                    offset:120,
                    showClose:true
                  });
                  // 阻塞0.3秒
                  setTimeout(function() {
                    window.location.assign("http://localhost:8088/admin/logout"); // 注销当前用户跳转至登录页面
                  }, 700);
                } else { // 添加失败
                  this.$message({
                    message:res.data.message,
                    type: 'error',
                    offset:120,
                    showClose:true
                  });
                }
              });
            }
          } else {
            this.$message({
              message: "当前输入的数据不合法!!!",
              type: 'error',
              offset:120,
              showClose:true
            });
            return false;
          }
        });
      },
      // 取消用户编辑
      getBack(userForm) {
        this.$refs[userForm].resetFields();
        this.show=false;
      },
    },
    router,//注册路由
  });
</script>

<script>
  // 注销
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });

  $('.ui.dropdown').dropdown({
    on : 'hover'
  });

  // 运行时间统计
  function secondToDate(second) {
    if (!second) {
      return 0;
    }
    var time = new Array(0, 0, 0, 0, 0);
    if (second >= 365 * 24 * 3600) {
      time[0] = parseInt(second / (365 * 24 * 3600));
      second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
      time[1] = parseInt(second / (24 * 3600));
      second %= 24 * 3600;
    }
    if (second >= 3600) {
      time[2] = parseInt(second / 3600);
      second %= 3600;
    }
    if (second >= 60) {
      time[3] = parseInt(second / 60);
      second %= 60;
    }
    if (second > 0) {
      time[4] = second;
    }
    return time;
  }
  function setTime() {
    /*此处为网站的创建时间*/
    var create_time = Math.round(new Date(Date.UTC(2021, 3, 15, 15, 15, 15)).getTime() / 1000);
    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    currentTime = secondToDate((timestamp - create_time));
    currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
  }
  setInterval(setTime, 1000);
</script>

<style>
  .blog_index{
    width: 54%;
    margin-top: 70px;
  }
  /* 输入框前的插槽 */
  .el-input-group__prepend{
    color: #00aaaa;
    font-weight: 900;
    border: 1px solid #00aaaa;
    background-color: rgb(255,255,255);
  }
  /* typeAndTag输入下拉框框设置 */
  #typeAndTag input{
    width: 325px;
    border-radius: 0px 3px 3px 0px;
  }
  .el-input__icon{
    margin-right: -5px;
  }

  .page_index{
    background-color: rgb(242, 242, 242);
    padding-top: 10px;
    padding-bottom: 10px
  }

  button.btn-next{
    background-color: #00aaaa;
    border-right: #f2f2f2;
  }

  /* 改变多选框大小 */
  .el-checkbox__inner {
    width: 15px;
    height: 15px;
  }

  /* 四个开启框文字颜色 */
  .openBox p{
    color: #5a80c9;
  }

  /* 背景图 */
  body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    font-family: "微软雅黑","宋体",Arial;
    width: 100%;
    height: 100%;
    background: url(https://unsplash.it/1000/400?image=24) no-repeat top
    center fixed;
    background-size: cover;
  }
</style>






